<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixeds" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',borderBottom?'scale-1px-bot':'',bgGray?'bg-gray':'',bgWhite?'bgWhite':'',bgLiner?'bg-liner':'',bgLinerBorder?'bg-liner-border':'']">
				<view class="action disCenter" @tap="BackPage" v-if="isBack">
					<!-- <text class="cuIcon-back"></text> -->
					<!-- <image src="/static/back-white.png" class="back" ></image> -->
					<image src="/static/img/back.png" class="back" v-if="isBlack"></image>
					<image src="/static/img/back-white.png" class="back" v-if="!isBlack"></image>
					<slot name="backText"></slot>
				</view>
				<view class="content over" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<view class="cu-right" @tap="rightClick">
					<slot name="rights"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var bgColor = this.bgColor;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				if(this.bgColor){
					style = `${style}background:${bgColor};color:white;`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			isBlack: {
				type: [Boolean, String],
				default: true
			},
			borderBottom: {
				type: [String],
				default: ''
			},
			bgImage: {
				type: String,
				default: ''
			},
			bgGray:{
				type: [Boolean, String],
				default: false
			},
			bgWhite:{
				type: [Boolean, String],
				default: false
			},
			bgLiner:{
				type: [Boolean, String],
				default: false
			},
			bgLinerBorder:{
				type: [Boolean, String],
				default: false
			},
			backDelta:{
				type: [String,Number],
				default: 1
			}
		},
		methods: {
			BackPage() {
				this.$emit('customBack',2);
				if(this.backDelta == 2){
					uni.switchTab({
						url:'/pages/index/index'
					})
					return;
				}
				const pages = getCurrentPages();
				const len = pages.length;
				if(len == 1){
					uni.reLaunch({
						url:'/pages/tabbar/index'
					})
				}else{
					uni.navigateBack({
						delta: 1
					});
				}
			},
			rightClick(){
				this.$emit('rightTap');
			},
		}
	}
</script>

<style lang="less" scoped>
	 @color: #dbdbdb;
	 
	.scale-1px-bot{
		position: relative;
		border: none;
	}
	.scale-1px-bot::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		background: @color;
		height: 1px;
		width: 100%;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	.cuIcon-back{
		color: #999999;
		font-size: 36upx;
	}
	.cu-custom {
		display: block;
		position: relative;
	}
	
	.cu-custom .cu-bar .content {
		// width: calc(100% - 440upx);
		width: 100%;
		text-align: center;
		font-size: 32upx;
		font-weight: 700;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		
	}
	.cu-bar.fixeds,
	.nav.fixeds {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 888;
		box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
	}
	/* #ifdef MP-ALIPAY */
	.cu-custom .cu-bar .action .cuIcon-back {
		opacity: 0;
	}
	
	/* #endif */
	
	.action{
		width: 70upx;
		height: 70upx;
		padding-left: 5upx;
		flex: none;
        display: flex;
        justify-content: center;
        align-items: center;
	}
	.action .back{
		width: 44upx;
		height: 44upx;
	}
	
	.cu-custom .cu-bar .content image {
		height: 60upx;
		width: 240upx;
	}
	
	.cu-custom .cu-bar {
		min-height: 0px;
		/* #ifdef MP-WEIXIN */
		padding-right: 64upx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		padding-right: 150upx;
		/* #endif */
		box-shadow: 0upx 0upx 0upx;
		z-index: 888;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10upx;
		color: #FF5200;
		/* #ifdef APP-PLUS||H5 */
		padding-right: 64upx;
		/* #endif */
		/* box-shadow:0px -5px 10px -2px rgba(0,0,0,0.5); */
	}
	
	.cu-custom .cu-bar .border-custom {
		position: relative;
		background: rgba(0, 0, 0, 0.15);
		border-radius: 1000upx;
		height: 30px;
	}
	
	.cu-custom .cu-bar .border-custom::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border: 1upx solid #ffffff;
		opacity: 0.5;
	}
	
	.cu-custom .cu-bar .border-custom::before {
		content: " ";
		width: 1upx;
		height: 110%;
		position: absolute;
		top: 22.5%;
		left: 0;
		right: 0;
		margin: auto;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		opacity: 0.6;
		background-color: #ffffff;
	}
	
	.cu-custom .cu-bar .border-custom text {
		display: block;
		flex: 1;
		margin: auto !important;
		text-align: center;
		font-size: 34upx;
	}
	.cu-right{
		position: absolute;
		z-index: 10;
		right: 15upx;
		padding: 15upx;
	}
	.over{
		overflow: visible;
	}
	.bg-gray{
		background: #f5f5f9;
	}
	.bgWhite{
		background: #fff;
	}
	.bg-liner{
		background: #FF5200;
		color: #ffffff !important;
	}
	.bg-liner-border{
		background: #FF5200;
		color: #ffffff !important;
		border-radius: 0 0 30rpx 30rpx;
	}
</style>
